<template>
    <div class="codemain">
        <div class="code_title">
            <span>输入短信验证码</span>
        </div>
        <div class="code_desc">
            <span>验证码已发送到</span>
            <span>+86 {{phone}}</span>
        </div>
        <div class="code_list">
            <div class="code_div">
                <input v-model="code_first" ref="code_first"/>
            </div>
            <div class="code_div">
                <input v-model="code_second" ref="code_second"/>
            </div>
            <div class="code_div">
                <input v-model="code_third" ref="code_third"/>
            </div>
            <div class="code_div">
                <input v-model="code_fourth" ref="code_fourth"/>
            </div>
        </div>
        <div class="code_btn">
            <span>重新发送</span>
            <span v-if="time!=60">{{time}}S</span>
        </div>

        <div class="code_btn_list">
            <div class="lbl_div" v-if="!code_first || !code_second || !code_third || !code_fourth">
                <span>下一步</span>
            </div>
            <div class="code_btn_div" v-else @click="toRegister">
                <span>下一步</span>
            </div>
           
        </div>
    </div>
</template>
  
<script>
    
    import homeapi  from '@/api/api';
    export default {
        name: 'codemain',
        data(){
            return{
                time:59,
                code_first:'',
                code_second:"",
                code_third:"",
                code_fourth:"",
                phone:"",
            }
        },

        mounted(){
            this.getTime();
            this.phone=this.$route.query.phone
            console.log(this.$refs)
            this.$refs["code_first"].focus();
        },
        components: {
            
        },
        methods:{
            getTime(){
                if(this.time>0){
                    this.time--;
                    setTimeout(() => {
                        this.getTime();
                    }, 1000);
                }
                else{
                    this.time=60;
                }
            },
            async toRegister(){
                let code=this.code_first+''+this.code_second+''+this.code_third+''+this.code_fourth
                let phone=this.phone
                let inviteCode=""
                let type=1
                this.$toast.loading({
                    title:"加载中..."
                })
                let data=await homeapi.checkCode({code,phone,inviteCode,type});
                if(data.code==200){
                    this.$toast.clear();
                    this.$router.push("/company")
                }
            }
        },
        watch:{
            code_first(){
                if(this.code_first){
                    this.$refs["code_second"].focus();
                }
            },
            code_second(){
                if(this.code_second){
                    this.$refs["code_third"].focus();
                }
                else{
                    this.$refs["code_first"].focus();
                }
            },
            code_third(){
                if(this.code_third){
                
                    this.$refs["code_fourth"].focus();
                }
                else{
                    this.$refs["code_second"].focus();
                }
            },
            code_fourth(){
                if(this.code_fourth){
                    
                }
                else{
                    this.$refs["code_third"].focus();
                }
            }
        }
    }
</script>
<style scoped lang="less">
    .codemain{
        width: 100%;
        display: inline-block;
    }
    .code_title{
        width: 100%;
        padding: 0 .64rem;
        box-sizing: border-box;
        margin-top: .6933rem;
        font-size: .64rem;
        color: #333333;
        line-height: .64rem;

    }
    .code_desc{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: .64rem;
        box-sizing: border-box;
        margin-top: .32rem;
        font-size: .32rem;
        color: #666666;
        line-height: .4267rem;
    }
    .code_desc span:last-child{
        margin-left: .2133rem;
    }
    .code_list{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.6rem;
        padding:0 .9467rem;
        box-sizing: border-box;
    }
    .code_div{
        width: 1.1733rem;
        height: 1.1733rem;
        background: #F5F5F5;
        border-radius:.1067rem;
    }
    .code_div input{
        width: 100%;
        height: 100%;
        border: 0px;
        outline: none;
        background: #F5F5F5;
        text-align: center;
        font-size: .3733rem;
    }
    .code_btn{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: .5333rem;
        font-size: .32rem;
        color: #999999;
        padding-left: .9467rem;
    }
    .code_btn span:last-child{
        font-size: .32rem;
        color: #333333;
        margin-left: .32rem;
    }
    .code_btn_list{
        width: 100%;
        padding: 0 .64rem;
        box-sizing: border-box;
    }
    .code_btn_div{
        width: 100%;
        height: 1.1733rem;
        background: #F5792A;
        border-radius: 1.3333rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2.1333rem;
        font-size: .3733rem;
        color: #ffffff;
    }
    .lbl_div{
        width: 100%;
        height: 1.1733rem;
        background: #F5F5F5;
        border-radius: 1.3333rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .3733rem;
        color: #999999;
        margin-top: 1.0667rem;
    }
</style>

  